<template>
	<w-layout showNavbar navTitle="地址添加" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view class="public-box-3 fc px-50 pt-40 pb-50" style="min-height: 750rpx;">
					<view class="fr-ac px-20 pb-30 u-border-bottom mt-30" style="border-color: var(--gray-line) !important;">
						<view class="op-90 w-22">
							收货人
						</view>
						<view class="flex-1 ml-40">
							<input v-model="formData.name" class="w-100 color" type="text" placeholder="请输入" />
						</view>
					</view>
					<view class="fr-ac px-20 pb-30 u-border-bottom mt-30" style="border-color: var(--gray-line) !important;">
						<view class="op-90 w-22">
							手机号
						</view>
						<view class="flex-1 ml-40">
							<input v-model="formData.mobile" class="w-100 color" type="number" maxlength="11" placeholder="请输入" />
						</view>
					</view>
					<view @click="ProvincePopup.show = true" class="fr-ac px-20 pb-30 u-border-bottom mt-30" style="border-color: var(--gray-line) !important;">
						<view class="op-90 w-22">
							选择地区
						</view>
						<view class="flex-1 ml-40" :class="formData.str?'color':''">
							{{formData.str || '点击选择'}}
						</view>
					</view>
					<view class="fr px-20 pb-30 u-border-bottom mt-30" style="border-color: var(--gray-line) !important;">
						<view class="op-90 w-22">
							详细地址
						</view>
						<view class="flex-1 ml-40">
							<textarea v-model="formData.address" class="w-100 color" style="height: 100rpx;" name="" id="" cols="30" rows="10" placeholder="请输入"></textarea>
						</view>
					</view>
					<view @click="formData.is_default = !formData.is_default" class="fr-ac my-40 fs-24">
						<up-icon v-if="formData.is_default" name="yuanxingxuanzhongfill" customPrefix="custom-icon" size="16"
							:color="publicStyles['--color']"></up-icon>
						<up-icon v-else name="yuanxingweixuanzhong" customPrefix="custom-icon" size="16"
							:color="publicStyles['--gray-9']"></up-icon>
							
						<view class="op-50 ml-15 flex-1">
							设为默认
						</view>
					</view>
					
					
					<view @click="saveAddress" class="public-btn-3 transition px-30 py-25 t-c mt-auto">
						<view class="text-color-b fs-32">
							保存地址
						</view>
					</view>
				</view>
				
				<picker-province
					:deep="3"
					:show="ProvincePopup.show"
					@confirm="confirmProvincePopup"
					@close="closeProvincePopup"
				></picker-province>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		getJumpData
	} from '@/common/common'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick,
		getCurrentInstance
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		address_add,
		address_edit
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	const CurrentInstance = getCurrentInstance()
	
	onLoad(async(options) => {
		getJumpData.apply(CurrentInstance.proxy,['on','setAddressInfo',(data)=>{
			console.log(data,'data')
			formData.id = data.data.id
			formData.name = data.data.name
			formData.mobile = data.data.mobile
			formData.address = data.data.address
			formData.is_default = data.data.is_default
			
			formData.provinceName = data.data.province
			formData.cityName = data.data.county
			formData.areaName = data.data.city
			
			
			defaultValue.value= [data.data.province,data.data.county,data.data.city]
			formData.str = defaultValue.value.join('')
		}])
		
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	
	const defaultValue = ref('410102')
	const formData = reactive({
		id: '',
		
		str:'',
		name:'',
		mobile:'',
		address:'',
		is_default:false,
		
		provinceName: '',
		cityName: '',
		areaName: '',
	})
	
	const page = reactive({
		scrollTop:0
	})
	
	function goAddChoose(){
		uni.navigateTo({
			url:`/pages/benefit/create_choose`
		})
	}
	
	async function saveAddress(){
		if(!formData.name){
			return uni.$u.toast('请输入收货人')
		}
		if(!uni.$u.test.mobile(formData.mobile)){
			return uni.$u.toast('请输入正确手机号')
		}
		if(!formData.str){
			return uni.$u.toast('请选择地址')
		}
		if(!formData.address){
			return uni.$u.toast('请输入详细地址')
		}
		let data = JSON.parse(JSON.stringify(formData))
		data.province = data.provinceName
		data.county = data.cityName
		data.city = data.areaName
		data.is_default = Number(data.is_default)
		
		if(formData.id) {
			const res = await address_edit(data)
			uni.$u.toast('编辑成功！')
			uni.navigateBack()
		} else {
			const res = await address_add(data)
			uni.$u.toast('添加成功！')
			uni.navigateBack()
		}
		
	}
	
	const ProvincePopup = reactive({
		show: false
	})
	function confirmProvincePopup(e){
		console.log(e,'eeee')
		formData.provinceName = e[0]
		formData.cityName = e[1]
		formData.areaName = e[2]
		formData.code = e[3]
		formData.str = e[0]+e[1]+e[2]
		closeProvincePopup()
	}
	function closeProvincePopup(){
		ProvincePopup.show = false
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 50rpx;
		
	}
	
	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
</style>